<template>
  <div class="map_main">
    <div class="map">
      <el-amap
        ref="map"
        vid="amapDemo"
        :amap-manager="amapManager"
        :center="center"
        :zoom="zoom"
        :plugin="plugin"
        :events="events"
        class="amap-demo">
<!--        <el-amap-marker vid="amapDemo" :position="center"></el-amap-marker>-->
        <el-amap-marker
          v-for="marker in markers"
          :position="marker.position"
          :key="marker.id"
          :events="marker.events"
          :icon="marker.icon"
        ></el-amap-marker>
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
        ></el-amap-info-window>
      </el-amap>
      <div id="main_pie"></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import AMap from 'vue-amap'
import location from 'assets/images/location.png'
const amapManager = new AMap.AMapManager()
export default {
  name: 'Home',
  data () {
    return {
      amapManager: amapManager,
      zoom: 5,
      markers: [],
      markerRefs: [],
      windows: [],
      window: '',
      center: [121.59996, 31.197646],
      events: {
        init: o => {
          // console.log(o)
        },
        moveend: () => {},
        zoomchange: () => {},
        click: e => {
          console.log(e)
        },
        complete: e => {
          this.completeMap(e)
        }
      },
      plugin: [
        'ToolBar',
        'MarkerClusterer'
      ],
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '商家统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 3,
              borderColor: 'rgba(255,255,255, .5)',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 12, name: '异常商家' },
              { value: 56, name: '正常商家' },
              { value: 29, name: '未审核商家' }
            ]
          }
        ]
      }
    }
  },
  created () {
  },
  computed: {
    ...mapState('home', ['maps'])
  },
  mounted () {
    console.log(this)
    this.$nextTick(() => {
      const chartDom = document.getElementById('main_pie')
      const myChart = this.$echarts.init(chartDom)
      myChart.setOption(this.option)
    })
  },
  methods: {
    ...mapActions('home', ['_get_all_shop_maps']),
    // 地图加载完毕
    completeMap () {
      const _this = this
      this._get_all_shop_maps().then(() => {
        // console.log(_this.maps)
        _this.point(_this.maps)
      })
    },
    _renderCluserMarker (context) {
      // console.log(context)
      const count = this.markers.length

      const factor = Math.pow(context.count / count, 1 / 18)
      const div = document.createElement('div')
      const Hue = 180 - factor * 180
      const bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
      const fontColor = 'hsla(' + Hue + ',100%,20%,1)'
      const borderColor = 'hsla(' + Hue + ',100%,40%,1)'
      const shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
      div.style.backgroundColor = bgColor
      const size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
      div.style.width = div.style.height = size + 'px'
      div.style.border = 'solid 1px ' + borderColor
      div.style.borderRadius = size / 2 + 'px'
      div.style.boxShadow = '0 0 1px ' + shadowColor
      div.innerHTML = context.count
      div.style.lineHeight = size + 'px'
      div.style.color = fontColor
      div.style.fontSize = '14px'
      div.style.textAlign = 'center'
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
      context.marker.setContent(div)
    },
    point (pointMarker) {
      // 自定义map点坐标图标
      // eslint-disable-next-line no-unused-vars
      // const icon = new AMap.Icon({
      //   image: location,
      //   size: new AMap.Size(2, 2),
      //   imageSize: new AMap.Size(2, 2)
      // })

      const markers = []
      const windows = []
      const that = this
      pointMarker.forEach((item, index) => {
        markers.push({
          position: [item.lat, item.lng],
          icon: location, // 不设置默认蓝色水滴
          events: {
            click () {
              that.windows.forEach(window => {
                window.visible = false // 关闭窗体
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true// 点击点坐标，出现信息窗体
              })
            }
          }
        })
        windows.push({
          position: [item.lat, item.lng],
          content: '' +
            '<div>' + '商户名称：' + item.name + '</div>' +
            '<div>' + '微 信：' + item.wx + '</div>' +
            '<div>' + '地 址：' + item.address + '</div>' +
            '<div>' + '生产地址：' + "<span style='color: #66A0FF'>" + item.pro_address + '</span>' + '</div>' +
            '<div>' + '发货地址：' + "<span style='color: #66A0FF'>" + item.log_address + '</span>' + '</div>' +
            '<div>' + '身份证号：' + "<span style='color: #66A0FF'>" + item.id_card + '</span>' + '</div>' +
            '<div>' + '注册时间：' + "<span style='color: #66A0FF'>" + item.create_time + '</span>' + '</div>',
          offset: [5, -15], // 窗体偏移
          visible: false// 初始是否显示
        })
      })
      // 添加点标注
      this.markers = markers
      // 生成弹窗
      this.windows = windows
    }
  }
}
</script>
<style lang="scss" scoped>
.map_main {
  position: relative;
  height: 100%;
}
.map {
  position: absolute;
  width: 100%;
  height: 100%;
  //background: #ff8080;
}
#main_pie {
  position: absolute;
  top: 0;
  left: 0;
  width: 330px;
  height: 200px;
  //background: #ff8080;

}
</style>
